<template>
    <div style="overflow: hidden;height: 100%;width: 100%">
        <x-header style="" :left-options="{showBack: false}">物联网开发助手</x-header>
        <div  style="position: fixed; top: 40px;left: 0;right: 0;bottom: 50px;background: darkorange">
            <div :class="demo01_index !== 0 ? 'hide' : 'show'" style="position: absolute">
                <VMap style="display: block;width: 300px;height: 300px;" @selectLocation="selectLocation"></VMap>
            </div>
            <div :class="demo01_index !== 1 ? 'hide' : 'show'" style="position: absolute">
                你好2
            </div>
            <div :class="demo01_index !== 2 ? 'hide' : 'show'" style="position: absolute">
                你好3
            </div>
            <div :class="demo01_index !== 3 ? 'hide' : 'show'" style="position: absolute;width: 100%;">
                <!-- 关于 -->
                <group style="width: 100%;">
                    <cell title="账号" :value="$store.state.userName" is-link link="/login"> </cell>
                </group>
            </div>
        </div>

        <tabbar>
            <tabbar-item selected @on-item-click="demo01_index=0">
                <img slot="icon" src="../../assets/logo.png">
                <img slot="icon-active" src="../../assets/vux_logo.png">
                <span slot="label">蓝牙</span>
            </tabbar-item>
            <tabbar-item  @on-item-click="demo01_index=1">
                <img slot="icon" src="../../assets/logo.png">
                <img slot="icon-active" src="../../assets/logo.png">
                <span slot="label">socket</span>
            </tabbar-item>
            <tabbar-item  @on-item-click="demo01_index=2">
                <img slot="icon" src="../../assets/logo.png">
                <img slot="icon-active" src="../../assets/logo.png">
                <span slot="label">配网</span>
            </tabbar-item>
            <tabbar-item  @on-item-click="demo01_index=3">
                <img slot="icon" src="../../assets/logo.png">
                <img slot="icon-active" src="../../assets/logo.png">
                <span slot="label">关于</span>
            </tabbar-item>
        </tabbar>

    </div>
</template>

<script>
    import { Group, Cell, Tabbar, TabbarItem, Swiper, SwiperItem } from '_vux@2.9.3@vux'
    import VMap from '../view/VMap'

    export default {
        components: {
            Group,
            Cell,
            Tabbar,
            TabbarItem,
            Swiper,
            SwiperItem,
            VMap
        },
        data () {
            return {
                demo01_index: 0
            }
        },
        methods: {
            selectLocation (location) {
                console.log(location)
                console.log(parseFloat(location.lng))
                console.log(parseFloat(location.lat))
            }
        }
    }
</script>

<style>
    .hide {
        display: none;
        opacity: 0;
        transition: 0s;
    }
    .show {
        display: block;
        opacity: 1;
        transition: 0s;
    }

</style>
